<route lang="json5" type="page">
{
  layout: 'main',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '知情同意书',
  },
}
</route>

<template>
  <div class="counselor-details">
    <view class="w-full flex justify-center items-center">
      <wd-img :width="100" :height="100" :src="counselor.avatar" round />
    </view>
    <wd-cell-group title="咨询师信息" class="counselor-info">
      <wd-cell title="姓名" :value="counselor.name" />
      <wd-cell title="擅长方向" :value="counselor.goodAt" />
      <wd-cell title="地址" :value="counselor.address" />
      <wd-cell title="价格" :value="counselor.price ? `￥${counselor.price}/小时` : ''" />
    </wd-cell-group>

    <wd-tabs
      v-model="activeTabName"
      class="info-tabs"
      sticky
      :offset-top="50"
      @click="handleTabClick"
    >
      <wd-tab name="intro" title="自我介绍">
        <p class="tab-content">{{ counselor.info }}</p>
      </wd-tab>
      <wd-tab name="package" title="咨询套餐">
        <view v-for="(item, index) in packageData" :key="index">
          <PackageItem :data="item" />
        </view>
      </wd-tab>
      <wd-tab name="time" title="预约时间">
        <TimeItem />
      </wd-tab>
      <wd-tab name="feedback" title="咨询反馈">
        <view>
          <FeedbackItem
            v-for="(item, index) in feedbackData"
            :key="index"
            :avatar="item.avatar"
            :nickname="item.nickname"
            :content="item.content"
            :likes="item.likes"
            :date="item.date"
          />
        </view>
      </wd-tab>
    </wd-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import cache from '@/utils/cache'
import { getPackage } from '@/api/consult'

const counselor = ref({
  id: null,
  avatar: '',
  name: '',
  goodAt: '',
  address: '',
  price: null,
  info: '',
})

const packageData = ref<any[]>([])

const counselorInfo = cache.get('counselorInfo')

const activeTabName = ref('intro')
const feedbackData = ref([
  {
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    nickname: '用户昵称1',
    content: '这是一条反馈信息。',
    likes: 10,
    date: '2024-05-15',
  },
  {
    avatar: 'https://unpkg.com/wot-design-uni-assets/redpanda.jpg',
    nickname: '用户昵称2',
    content: '这个产品非常好用！',
    likes: 8,
    date: '2024-05-14',
  },
  {
    avatar: 'https://unpkg.com/wot-design-uni-assets/capybara.jpg',
    nickname: '用户昵称3',
    content: '我期待更多的功能更新。',
    likes: 5,
    date: '2024-05-13',
  },
  {
    avatar: 'https://unpkg.com/wot-design-uni-assets/panda.jpg',
    nickname: '用户昵称4',
    content: '需要改进的地方还有很多。',
    likes: 3,
    date: '2024-05-12',
  },
  {
    avatar: 'https://unpkg.com/wot-design-uni-assets/meng.jpg',
    nickname: '用户昵称5',
    content: '希望能够加入更多交互元素。',
    likes: 15,
    date: '2024-05-11',
  },
])

const handleTabClick = (tab: any) => {
  console.log(tab)
  const { index } = tab
  switch (index) {
    case 1:
      getPackageData()
      break
    case 3:
      getFeedbackData()
      break
  }
}

const getPackageData = () => {
  getPackage({ consultantId: counselor.value.id }).then((res) => {
    packageData.value = res.data
  })
  // 获取咨询套餐数据
}
const getFeedbackData = () => {
  // 获取咨询反馈数据
}

onShow(() => {
  if (counselorInfo) {
    counselor.value = counselorInfo
  }
})
</script>

<style lang="scss" scoped>
.counselor-details {
  .counselor-info,
  .info-tabs {
    margin-top: 15px;
  }

  .tab-content {
    padding: 10px;
    color: #666;
  }
}

:deep(.counselor-avatar) {
  display: flex;
  place-items: center center;
  width: 100%;
}
</style>
